<!--
 * @Author: 黄达全
 * @Date: 2024-07-29 17:03:38
 * @LastEditTime: 2024-07-29 17:03:45
-->
<script lang="ts" setup>
import useElementPlus from "@/hooks/useElementPlus"
import { reactive } from 'vue'
const { message } = useElementPlus()

const saveShoppingSettings = () => {
    // 实现保存购物设置的逻辑
    message({
        message: "保存成功",
        type: "success"
    })
}

const shipForm = reactive({
    ship_key: ""
})

const shipFormRules = reactive({
    ship_key: [
        { required: true, message: '请输入ship_key', trigger: 'blur' },
    ]
})
</script>

<template>
    <el-card class="card" :body-style="{ padding: '10px 20px 105x 20px' }">
        <template #header>
            <div class="title">物流管理</div>
        </template>
        <el-form :model="shipForm" :rules="shipFormRules" :label-width="120">
            <el-form-item label="物流查询key" prop="ship_key">
                <div class="upload">
                    <el-input v-model="shipForm.ship_key" placeholder="请输入ship_key"></el-input>
                    <div class="min_text">用于查询物流信息</div>
                </div>
            </el-form-item>
            <el-button color="var(--primary-theme-color)" size="small" type="primary"
            @click="saveShoppingSettings">保存</el-button>
        </el-form>

       
    </el-card>
</template>

<style lang="scss" scoped>
.shopping-setting {
    padding: 20px 0;

    .setting-item {
        margin-bottom: 30px;
    }

    .setting-label {
        font-size: 14px;
        margin-bottom: 10px;
        font-weight: 500;
    }

    .setting-input {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .el-input {
            width: 200px;
            margin-right: 10px;
        }

        .setting-button {
            background-color: #f0f0f0;
            color: var(--primary-theme-color);
            padding: 8px 15px;
            border-radius: 4px;
            font-size: 14px;
        }
    }

    .setting-desc {
        font-size: 12px;
        color: #999;
    }
}

.title {
    font-size: 14px;
    font-size:800;
}
.upload{
    display: flex;
    flex-direction: column;
    .min_text{
        font-size: 12px;
        color: grey;
    }
}
</style>
